Image Functions 2

To work with images in Jupyter Processing, you need to do three things:

  1. Upload your images to the same folder where your notebook is
  2. List the images in a @pjs comment (see below)
  3. use loadImage() to load the image into Processing
In [1]:
/* @pjs preload="pic3.jpg,tornadovolcano.jpg"; */

PImage img;
PImage bimg;

void setup() {
    int guess = 13;
    img = loadImage("pic3.jpg");
    bimg = loadImage("tornadovolcano.jpg");
    img.resize(600, 400);
    bimg.resize(600, 400);
    size(img.width, img.height);
    img.loadPixels();
    bimg.loadPixels();
    for (int y=0; y < img.height; y++) {
        for (int x=0; x < img.width; x++) {
            color c = img.pixels[x + y * img.width];
            float r = red(c);
            float g = green(c);
            float b = blue(c);
            if (
            (((201 - guess) < r && r < (201 + guess)) && 
             ((59 - guess) < g  && g < (59 + guess)) && 
             ((98 - guess) < b && b < (98 + guess)))
            ||
            (((180 - guess) < r && r < (211 + guess)) && 
             ((141 - guess) < g  && g < (141 + guess)) && 
             ((151 - guess) < b && b < (151 + guess)))
            || // 162, 113, 116
            (((162 - guess) < r && r < (162 + guess)) && 
             ((113 - guess) < g  && g < (113 + guess)) && 
             ((120 - guess) < b && b < (116 + guess)))
            ||
            (((123 - guess) < r && r < (123 + guess)) && 
             ((77 - guess) < g  && g < (77 + guess)) && 
             ((80 - guess) < b && b < (80 + guess)))) {
                img.pixels[x + (y * img.width)] = bimg.pixels[x + (y * bimg.width)];
            }
        }
    }    
    img.updatePixels();    
}

void mousePressed() {
    img.loadPixels();
    color c = img.pixels[mouseX + mouseY * img.width]; // img.get(mouseX, mouseY);
    float r = red(c);
    float g = green(c);
    float b = blue(c);
    println("RGB: (" + mouseX + ", " + mouseY + ") " + r + ", " + g + ", " + b);
}

void draw() {
    image(img, 0, 0);
    noLoop();
}
Sketch #1:

Sketch #1 state: Loading...
In [2]:
/* @pjs preload="pic3.jpg"; */
// (34, 89) 
// (135, 186) 

PImage img;
PImage head;

Head[] heads;

void setup() {
    img = loadImage("pic3.jpg");
    head = createImage(135 - 34, 186 - 89, RGB);
    img.resize(600, 400);
    size(img.width, img.height);
    img.loadPixels();
    head.loadPixels();
    for (int x=34; x < 135; x++) {
        for (int y=89; y < 186; y++) {
            head.pixels[x - 34 + (y - 89) * head.width] = img.pixels[x + y * img.width];
        }
    }    
    head.updatePixels();  
    head.resize(30, 30);
    heads = new Head[100];
    for (int i =0; i < 100; i++) {
        heads[i] = new Head(random(width), random(height));
    }
    
}

class Head {
    float hx, hy, vx, vy;
    
    Head(float hx, float hy) {
        this.hx = hx;
        this.hy = hy;
        this.vx = random(5) - 2.5;
        this.vy = random(5) - 2.5;
    }
    
    void move() {
        hx += vx;
        hy += vy;
        if (hx > width)
            vx = -vx;
        else if (hx < 0)
            vx = -vx;
        if (hy > height)
            vy = -vy;
        else if (hy < 0)
            vy = -vy;
    }
    
    void draw() {
        image(head, hx, hy);
    }
}

void draw() {
    background(255);
    for (int i =0; i < 100; i++) {
        heads[i].move();
        heads[i].draw();
    }
}
Sketch #2:

Sketch #2 state: Loading...